<template>
  <div class="merchantList">
    <Card shadow >
      <p slot="title">商户列表</p>
      <i-form style="text-align: right;" ref="form-validate" inline :model="formItem" >
        <Form-item >
          <i-input v-model="formItem.userId"  placeholder="商户ID"></i-input>
        </Form-item>
        <Form-item >
          <i-input v-model="formItem.username"  placeholder="商户名称"></i-input>
        </Form-item>
        <Form-item >
          <Button  @click="searchBtn" class="com-btm">
          搜索</Button>
        </Form-item>
      </i-form>

      <div class="record">
        <Row type="flex" justify="start" class="code-row-bg">
          <record-list v-for="(item,index) in recordData" :key="index" :item="item">
          </record-list>
        </Row>
      </div>
      <i-table :columns="allColumns" :data="MarchantData"></i-table>
       <div style="overflow: hidden; margin-top: 10px;">
         <Page ref="page" style="float: left;"
         size="small" :total="dataCount" :current="pageCurrent"
         :page-size="pageSize" @on-change="changepage"
         @on-page-size-change="pagesize"
           show-total show-sizer show-elevator></Page>
           <Button size="small" class="pageBtn com-btm"
             @click="goToPage()">跳转</Button>
       </div>
  </Card>
  </div>

</template>

<script>
  let testData = [{
        userID: '14',
        userName:'测试',
        accountBalance: '10400',
        rechargeRate:'3',
        staus: '开启'
      },
      {
            userID: '15',
            userName:'测试',
            accountBalance: '10400',
            rechargeRate:'3',
            staus: '开启'
          },
          {
                userID: '16',
                userName:'测试',
                accountBalance: '10400',
                rechargeRate:'3',
                staus: '开启'
              }
    ];
  import RecordList from '@/components/record-list/record-list.vue'
  export default {
    name: 'merchant_list_page',
    components: {
      RecordList
    },
    data () {
      return {
        recordData: [{
              title: '总金额：',
              num: 199603.92,
              color: '#219021'
            }
        ],
      tempdata: [],
        // 初始化信息总条数
        dataCount: 0,
        // 每页显示多少条
        pageSize: 1,
        pageCurrent: 1, //当前页
        formItem: {
          userId:'',
          username:''
        },
        allColumns: [
          {
            type: 'selection',
            width: 50,
             // fixed: 'left',
            align: 'center'
          },
          {
            title: '商户ID',
            width: 100,
            key: 'userID'
          },
          {
            title: '商户名称',
            width: 160,
            key: 'userName'
          },
          {
            title: '余额',
            width: 160,
            key: 'accountBalance'
          },
          {
            title: '充值费率(%)',
            width: 160,
            key: 'rechargeRate'
          },
          {
            title: '状态',
            key: 'staus',
            width: 160,
            render: (h, params) => {
              return h("div", [
                h(
                  "div", {
                    props: {
                      size: "small"
                    },
                    style: {
                      color:'green'
                    },
                  },
                  "开启"
                ),
              ])
            }
          },
          {
            title: '操作',
            key: 'action',
            minWidth:220,
            align: 'left',
            render: (h, params) => {
              return h("div", [
                h(
                  "Button", {
                    props: {
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          name: 'check_view_page'
                        })

                      }
                    }
                  },
                  "查看信息"
                ),
                h(
                  'Button', {
                   props: {
                     size: "small"
                   },
                   style: {
                     marginRight: "5px",
                   },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: 'change_money_page'
                      })
                    }
                  }
                  },
                  '余额变更')
              ]);
            }

          }
        ],
        MarchantData: [],
      };
    },
      methods: {
        // 按条件搜索
        searchBtn() {
          this.$refs['form-validate'].validate((valid) => {
            console.log(this.formItem.userId)
            if (valid) {
              this.$Message.success('搜索成功!');
            } else {
              this.$Message.error('搜索失败!');
            }
          })
        },

        // 获取测试数据进行分页
        getTestData() {
          // 保存取到的所有数据
          this.tempdata = testData;
          this.dataCount = testData.length;
          // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
          if (testData.length < this.pageSize) {
            this.MarchantData = this.tempdata;
          } else {
            this.MarchantData = this.tempdata.slice(0, this.pageSize);
          }
        },

        // 点击切换页面
        changepage(index) {
          //需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
          let _start = (index - 1) * this.pageSize;
          //需要显示结束数据的index
          let _end = index * this.pageSize;
          //截取需要显示的数据
          this.MarchantData = this.tempdata.slice(_start, _end);
          //储存当前页
          this.page = index;
        },
        //每页显示的数据条数
        pagesize(index) {
          let _start = (this.pageCurrent - 1) * index;
          let _end = this.pageCurrent * index;
          this.MarchantData = this.tempdata.slice(_start, _end);
          //实时获取当前需要显示的条数
          this.pageSize = index;
        },
        //点击跳转到输入的页码
        goToPage() {
          let t_value = this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value;
          if (t_value == "") {
            this.$Message.info('请填写页数');
            return false;
          }
          if (t_value <= 0) {
            this.$Message.info('页码不能小于0');
            return false;
          }
          if (t_value > Math.ceil(this.dataCount / this.pageSize)) {
            this.$Message.info('超过总页数，无法跳转');
            // this.$refs.page.$el.lastElementChild.lastElementChild.childNodes[1].value = this.current;
            return false;
          }
          this.pageCurrent = parseInt(t_value);
          this.changepage(this.pageCurrent); //触发分页
        }

      },
      created() {
        this.getTestData();

      }
    }
</script>

<style lang="less">
  @import './merchant-list.less';
   .merchantList .ivu-card-head{
    position: relative;
  }
   .merchantList .ivu-card-head::after{
            content: '';
            position: absolute;
            left: 10px;
            bottom: 0;
            width: 70px;
            border-bottom: 2px solid #5FB878;
      }
     .merchantList .ivu-btn:hover {
          color: #515A6E;
          border-color: green!important;
      }

     .merchantList .pageBtn{
       float: left;
       margin-left: 10px;
       margin-top: 2px;
       color: #fff;
       background-color: #009688;
      }
      .merchantList .pageBtn:hover{
        color: #fff;
        opacity: 0.8;
      }

</style>
